details 
  display: block
  position: relative
  margin-bottom: 1rem
  min-height: 54px
  overflow: hidden
  border-radius: 12px
  border: var(--style-border)
  transition: border .3s
details:hover 
  border: var(--style-border-hover-always)
details summary 
  position: absolute
  padding: .5rem 1rem
  background: var(--efu-card-bg)
  margin: 0
  transition: .3s
  box-shadow: var(--efu-shadow-border)
  left: 0
  width: 100%
  font-weight: 700
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
details>:nth-child(2) 
  margin-top: calc(54px + 1rem)!important
details[open] summary 
  background: var(--efu-lighttext)
  color: var(--efu-card-bg)
details summary::before 
  content: ''
  padding: 4px
details summary:hover 
  cursor: pointer
  background: var(--efu-lighttext)
  color: var(--efu-card-bg)
  transition: .3s
  box-shadow: var(--efu-shadow-main)
details summary:focus 
  outline: 0
details summary::marker 
  color: var(--efu-lighttext)
  transition: .3s
details[open] summary::marker 
  color: var(--efu-card-bg)
details summary:hover::marker 
  color: var(--efu-card-bg)
details[open] 
  border-radius: 12px
  border: var(--style-border-hover-always)
  padding: 0 1.5rem
  background: var(--efu-card-bg)
details summary:hover:after 
  position: absolute
  content: '+'
  text-align: center
  top: calc(50% - 2px)
  transform: translateY(-50%)
  right: 16px
  line-height: 1
details[open]>summary:hover:after 
  content: '-'
@media screen and (max-width: 768px) 
  details[open] 
    padding:0 16px